import React, { useState } from 'react';
import { Card, Row, Col, Typography, Progress, List, Tag, Avatar, Button } from '@douyinfe/semi-ui';
import { IconUser, IconUserGroup, IconKey, IconTreeTriangleDown, IconArrowUp, IconArrowDown } from '@douyinfe/semi-icons';
import { useNavigate } from 'react-router-dom';

const { Title, Text } = Typography;

interface StatCard {
  title: string;
  value: number;
  icon: React.ReactNode;
  color: string;
  trend?: {
    value: number;
    isUp: boolean;
  };
}

const Dashboard: React.FC = () => {
  const navigate = useNavigate();
  const [stats] = useState<StatCard[]>([
    {
      title: '用户总数',
      value: 1234,
      icon: <IconUser size="large" />,
      color: 'blue',
      trend: { value: 12, isUp: true },
    },
    {
      title: '角色总数',
      value: 25,
      icon: <IconUserGroup size="large" />,
      color: 'green',
      trend: { value: 3, isUp: true },
    },
    {
      title: '权限总数',
      value: 156,
      icon: <IconKey size="large" />,
      color: 'orange',
      trend: { value: 8, isUp: false },
    },
    {
      title: '菜单总数',
      value: 42,
      icon: <IconTreeTriangleDown size="large" />,
      color: 'purple',
      trend: { value: 2, isUp: true },
    },
  ]);

  const recentActivities = [
    {
      id: 1,
      user: '管理员',
      action: '创建了新用户',
      target: 'zhangsan',
      time: '2分钟前',
      type: 'create',
    },
    {
      id: 2,
      user: '管理员',
      action: '修改了角色权限',
      target: '普通用户',
      time: '5分钟前',
      type: 'update',
    },
    {
      id: 3,
      user: '张三',
      action: '登录系统',
      target: '',
      time: '10分钟前',
      type: 'login',
    },
    {
      id: 4,
      user: '李四',
      action: '修改了个人信息',
      target: '',
      time: '15分钟前',
      type: 'update',
    },
    {
      id: 5,
      user: '管理员',
      action: '删除了权限',
      target: 'test:delete',
      time: '20分钟前',
      type: 'delete',
    },
  ];

  const getActionTypeColor = (type: string) => {
    switch (type) {
      case 'create':
        return 'green';
      case 'update':
        return 'blue';
      case 'delete':
        return 'red';
      case 'login':
        return 'cyan';
      default:
        return 'grey';
    }
  };

  const getActionTypeText = (type: string) => {
    switch (type) {
      case 'create':
        return '创建';
      case 'update':
        return '更新';
      case 'delete':
        return '删除';
      case 'login':
        return '登录';
      default:
        return '其他';
    }
  };

  return (
    <div className="space-y-6">
      {/* 页面标题 */}
      <div>
        <Title heading={3} className="mb-2">
          仪表盘
        </Title>
        <Text type="secondary">
          欢迎使用 Pick Things 后台管理系统
        </Text>
      </div>

      {/* 统计卡片 */}
      <Row gutter={[16, 16]}>
        {stats.map((stat, index) => (
          <Col span={6} key={index}>
            <Card 
              shadows="hover"
              bordered={true}
              style={{ height: '100%' }}
            >
              <Card.Meta
                avatar={
                  <Avatar 
                    size="large" 
                    style={{ 
                      backgroundColor: `var(--semi-color-${stat.color})`,
                      color: 'white'
                    }}
                  >
                    {stat.icon}
                  </Avatar>
                }
                title={
                  <div>
                    <Text type="secondary" size="small">
                      {stat.title}
                    </Text>
                    <div style={{ marginTop: 8 }}>
                      <Title heading={2} style={{ margin: 0, display: 'inline-block' }}>
                        {stat.value.toLocaleString()}
                      </Title>
                      {stat.trend && (
                        <Tag
                          color={stat.trend.isUp ? 'green' : 'red'}
                          size="small"
                          style={{ marginLeft: 8 }}
                        >
                          {stat.trend.isUp ? <IconArrowUp /> : <IconArrowDown />}
                          {stat.trend.value}%
                        </Tag>
                      )}
                    </div>
                  </div>
                }
              />
            </Card>
          </Col>
        ))}
      </Row>

      <Row gutter={[16, 16]}>
        {/* 系统状态 */}
        <Col span={12}>
          <Card 
            title="系统状态" 
            shadows="hover"
            bordered={true}
            headerLine={true}
            style={{ height: '100%' }}
          >
            <div className="space-y-4">
              <div>
                <div className="flex justify-between items-center mb-2">
                  <Text>CPU 使用率</Text>
                  <Text strong>45%</Text>
                </div>
                <Progress percent={45} stroke="var(--semi-color-success)" />
              </div>
              
              <div>
                <div className="flex justify-between items-center mb-2">
                  <Text>内存使用率</Text>
                  <Text strong>68%</Text>
                </div>
                <Progress percent={68} stroke="var(--semi-color-warning)" />
              </div>
              
              <div>
                <div className="flex justify-between items-center mb-2">
                  <Text>磁盘使用率</Text>
                  <Text strong>32%</Text>
                </div>
                <Progress percent={32} stroke="var(--semi-color-info)" />
              </div>
              
              <div>
                <div className="flex justify-between items-center mb-2">
                  <Text>网络带宽</Text>
                  <Text strong>23%</Text>
                </div>
                <Progress percent={23} stroke="var(--semi-color-success)" />
              </div>
            </div>
          </Card>
        </Col>

        {/* 最近活动 */}
        <Col span={12}>
          <Card 
            title="最近活动" 
            shadows="hover"
            bordered={true}
            headerLine={true}
            style={{ height: '100%' }}
            headerExtraContent={
              <Button theme="borderless" size="small">
                查看全部
              </Button>
            }
          >
            <List
              dataSource={recentActivities}
              renderItem={(item) => (
                <List.Item className="px-0">
                  <div className="flex items-center justify-between w-full">
                    <div className="flex items-center space-x-3">
                      <Tag color={getActionTypeColor(item.type)} size="small">
                        {getActionTypeText(item.type)}
                      </Tag>
                      <div>
                        <Text strong>{item.user}</Text>
                        <Text className="ml-1">{item.action}</Text>
                        {item.target && (
                          <Text code className="ml-1">
                            {item.target}
                          </Text>
                        )}
                      </div>
                    </div>
                    <Text type="secondary" size="small">
                      {item.time}
                    </Text>
                  </div>
                </List.Item>
              )}
            />
          </Card>
        </Col>
      </Row>

      {/* 快捷操作 */}
      <Card 
        title="快捷操作"
        shadows="hover"
        bordered={true}
        headerLine={true}
      >
        <Row gutter={[16, 16]}>
          <Col span={6}>
            <Card 
              shadows="hover"
              bordered={true}
              style={{ 
                textAlign: 'center',
                transition: 'all 0.3s ease'
              }}
              bodyStyle={{ padding: '24px 16px' }}
              actions={[
                <Button 
                  key="user-action"
                  theme="borderless" 
                  block
                  onClick={() => navigate('/system/user')}
                >
                  进入管理
                </Button>
              ]}
            >
              <Card.Meta
                avatar={
                  <Avatar 
                    size="extra-large" 
                    style={{ 
                      backgroundColor: 'var(--semi-color-primary)',
                      margin: '0 auto 12px'
                    }}
                  >
                    <IconUser size="large" />
                  </Avatar>
                }
                title={<Text strong>用户管理</Text>}
                description={<Text type="secondary" size="small">管理系统用户</Text>}
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card 
              shadows="hover"
              bordered={true}
              style={{ 
                textAlign: 'center',
                transition: 'all 0.3s ease'
              }}
              bodyStyle={{ padding: '24px 16px' }}
              actions={[
                <Button 
                  key="role-action"
                  theme="borderless" 
                  block
                  onClick={() => navigate('/system/role')}
                >
                  进入管理
                </Button>
              ]}
            >
              <Card.Meta
                avatar={
                  <Avatar 
                    size="extra-large" 
                    style={{ 
                      backgroundColor: 'var(--semi-color-success)',
                      margin: '0 auto 12px'
                    }}
                  >
                    <IconUserGroup size="large" />
                  </Avatar>
                }
                title={<Text strong>角色管理</Text>}
                description={<Text type="secondary" size="small">管理用户角色</Text>}
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card 
              shadows="hover"
              bordered={true}
              style={{ 
                textAlign: 'center',
                transition: 'all 0.3s ease'
              }}
              bodyStyle={{ padding: '24px 16px' }}
              actions={[
                <Button 
                  key="permission-action"
                  theme="borderless" 
                  block
                  onClick={() => navigate('/system/permission')}
                >
                  进入管理
                </Button>
              ]}
            >
              <Card.Meta
                avatar={
                  <Avatar 
                    size="extra-large" 
                    style={{ 
                      backgroundColor: 'var(--semi-color-warning)',
                      margin: '0 auto 12px'
                    }}
                  >
                    <IconKey size="large" />
                  </Avatar>
                }
                title={<Text strong>权限管理</Text>}
                description={<Text type="secondary" size="small">管理系统权限</Text>}
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card 
              shadows="hover"
              bordered={true}
              style={{ 
                textAlign: 'center',
                transition: 'all 0.3s ease'
              }}
              bodyStyle={{ padding: '24px 16px' }}
              actions={[
                <Button 
                  key="menu-action"
                  theme="borderless" 
                  block
                  onClick={() => navigate('/system/menu')}
                >
                  进入管理
                </Button>
              ]}
            >
              <Card.Meta
                avatar={
                  <Avatar 
                    size="extra-large" 
                    style={{ 
                      backgroundColor: 'var(--semi-color-tertiary)',
                      margin: '0 auto 12px'
                    }}
                  >
                    <IconTreeTriangleDown size="large" />
                  </Avatar>
                }
                title={<Text strong>菜单管理</Text>}
                description={<Text type="secondary" size="small">管理系统菜单</Text>}
              />
            </Card>
          </Col>
        </Row>
      </Card>
    </div>
  );
};

export default Dashboard;